import { Component, ReactNode } from "react";

class Hello extends Component {
  render() {
    return (
      <div>
        <h2>Hello</h2>
        <p>{this.props.t("Hello")}</p>
      </div>
    );
  }
}

class World extends Component {
  render() {
    return (
      <div>
        <h2>World</h2>
        <p>{this.props.t("Hello")}</p>
      </div>
    );
  }
}

function withDelay(WrappedComponent) {
  return class DelayComponent extends Component {
    state = {
      show: false,
    };

    componentDidMount(): void {
      setTimeout(() => {
        this.setState({ show: true });
      }, 3000);
    }

    render() {
      if (this.state.show) {
        return <WrappedComponent {...this.props} />;
      } else {
        return <div>加载中...</div>;
      }
    }
  };
}

function withT(WrappedComponent) {
  return class TComponent extends Component {
    t = () => {
      return "您好";
    };

    render() {
      return <WrappedComponent {...this.props} t={this.t} />;
    }
  };
}

function withTranslation() {
  // 返回的才是高阶函数
  return function (WrappedComponent) {
    return class TComponent extends Component {
      t = () => {
        return "您好";
      };

      render() {
        return <WrappedComponent {...this.props} t={this.t} />;
      }
    };
  };
}

// withTranslation()(Hello)

const DelayHello = withT(withDelay(Hello));
const DelayWorld = withT(withDelay(World));

export default class App extends Component {
  render() {
    return (
      <div>
        <h1>App</h1>
        <hr />
        <DelayHello />

        <DelayWorld />
      </div>
    );
  }
}
